
import React from 'react';


type DividerProps = {
    children?: React.ReactNode | string | number,
    className?: string,
    width?: string,
    height?: string,
    length?: string,
    color?: string,
    border?: string,
    direction?: "horizontal" | "vertical",
    style?: React.CSSProperties,
    type?: "solid" | "dashed" | "dotted",
    textPosition?: "center" | "start" | "end",
};
const Divider = ({
    width,
    height,
    type,
    style,
    children,
    className,
    length,
    color = "after:border-gray-300",
    border,
    direction = "horizontal",
    textPosition = "center",
}: DividerProps) => {
    let restype;
    switch (type) {
        case "dashed":
            restype = "after:border-dashed";
            break;
        case "dotted":
            restype = "after:border-dotted";
            break;
        default:
            restype = "after:border-solid";
            break;
    }
    if (direction === "horizontal") {
        border = border ? border : "after:border-t-2";
        length = length ? length : "after:w-full";
        width = width ? width : "w-full";
    } else {
        border = border ? border : "after:border-l-2";
        length = length ? length : "after:h-full";
        height = height ? height : "h-auto";
    }
    return (
        <div className={`flex items-center self-stretch ${width} ${height} ${direction === "horizontal" ? "flex-row" : "flex-col"}`}>
            <span
                style={style}
                className={`
            relative flex items-center justify-center
            after:absolute self-stretch  
            ${textPosition === "start" ? "grow-1" : textPosition === "end" ? "grow-5" : "grow-1"}
             ${direction === "horizontal" ? "w-auto  " : "h-auto "}
             ${color}
             ${className}
             ${length}
             ${border}
             ${restype}  
                     
        `} ></span>
            {children && <span className={`${direction === "vertical" ? "w-4" : ""}`}>{children}</span>}
            <p className='h-auto flex  before:border-1 before:border-blue-500 before:bg-red-300 before:h-3/5 before:content-[""]'></p>
            <span
                style={style}
                className={`
            relative flex items-center justify-center
            after:absolute self-stretch
            ${textPosition === "start" ? "grow-5" : textPosition === "end" ? "grow-1" : "grow-1"}

             ${direction === "horizontal" ? "w-auto  " : "h-auto "}
             ${color}
             ${className}
             ${length}
             ${border}
             ${restype}
            
        `} ></span>
        </div>
    );
};

export default Divider;
